<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .box {
            width: 1000px;
            height: 800px;
            margin: 30px auto;
            display: flex;
            border: 1px solid;
            background-color: #999;
        }

        #myCanvas {
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <canvas id="myCanvas" width="950" height="750"></canvas>
    </div>
</body>
<script name="toolFunctions">
    // 画矩形
    const drawRect = (ctx, point, width, height) => {
        // 清除画布
        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
        // 开始画
        ctx.beginPath()
        ctx.strokeStyle = '#f33'
        ctx.strokeRect(point[0], point[1], width, height)
        ctx.fillStyle = 'lightblue'
        ctx.fillRect(point[0], point[1], width, height);
        ctx.closePath()
    }

    const drawIt = (canvas, ctx, x, y) => {
        let animationId = null
        if (x <= 400) {
            x += 10;
        }
        if (y <= 300) {
            y += 5;
        }
        drawRect(ctx, [x, y], y, 100)
        animationId = window.requestAnimationFrame(() => drawIt(canvas, ctx, x, y))
        console.log(111);
        if (x >= 400 && y >= 300) {
            window.cancelAnimationFrame(animationId);
        }
    }
</script>
<script>
    /** @type { HTMLCanvasElement } */
    const myCanvas = document.getElementById('myCanvas')
    const context = myCanvas.getContext("2d")
    let x = 0
    let y = 0
    window.requestAnimationFrame(() => drawIt(myCanvas, context, x, y))


</script>

</html>